import React, { Component } from 'react'
const ThemeContext = React.createContext()

// 创建上下文对象（ThemeContext）
// 祖先组件通过 上下文对象的 Provider 配合 value属性传值
// 如果后代组件是类组件，可以使用类的静态属性的特性（2中写法）赋值为上下文对象
//  后代组件就可以通过 this.context 获取到祖先组件的数据
// 如果后代组件是函数式组件

// 如果后代组件是函数式组件,可以通过上下对象提供的Consumer传值，
//   内部写为箭头函数，返回jsx代码，箭头函数的参数为祖先组件传递过来的值
// ？类组件能不能使用Consumer传值 ---- 必然可以

// ？如果项目中有多个 上下文传值呢？

const Third = () => {
      return (
        <div>
            theme: 
            <ThemeContext.Consumer>
                {
                    (val) => {
                        return (
                            <span>
                                { val }
                            </span>
                        )
                    }
                }
            </ThemeContext.Consumer>
        </div>
      )
  }
  // Third.contextType = ThemeContext
  
  class Second extends Component {
    render() {
      return (
        <div>
          <Third/>
        </div>
      )
    }
  }
  export default class App extends Component {
    state = {
      theme: 'dark'
    }
    render() {
      return (
        <ThemeContext.Provider value = { this.state.theme }>
          <div>
            <Second theme = { this.state.theme }/>
          </div>
        </ThemeContext.Provider>
      )
    }
  }